<template>
    <div>
        <el-container>
            <el-header>
                <el-row style="padding: 10px; background: linear-gradient(89deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                    <el-col :span="4">
                        <span style="font-size: 20px; font-weight: 1000; color: white">
                            <el-icon><HomeFilled /></el-icon>测试
                        </span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main style="padding: 0%">
                <div>
                    <el-card style="height: auto">
                        <el-form :model="findform" :inline="true" label-width="100px">
                            <el-row :gutter="10">
                                <template v-for="(item, index) in Stores.comui[componentId][0].baseProps">
                                    <el-col v-if="item.visible && item.ismore == false" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                                        <el-form-item :label="item.label">
                                            <template #default>
                                                <div v-if="item.type === 'date'">
                                                    <el-date-picker v-model="findform[item.prop]" type="daterange" :start-placeholder="$t('开始')" :end-placeholder="$t('结束')" style="width: 200px" />
                                                </div>
                                                <div v-else>
                                                    <el-input clearable v-model="findform[item.prop]" :id="item.prop" />
                                                </div>
                                            </template>
                                        </el-form-item>
                                    </el-col>
                                </template>
                                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                                    <el-form-item>
                                        <el-button color="#e1d8d8" round :icon="Refresh" @click="resetForm()" id="reset">{{ $t('重置') }}</el-button>
                                        <el-button v-loading="loading" type="primary" round :icon="Search" @click="gettablelist()" id="find">{{ $t('查找') }}</el-button>
                                        <el-button v-loading="loading" type="primary" round @click="createdata()" id="find">创建数据</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-card>
                    <el-row style="padding: 5px; background: linear-gradient(89deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                        <el-col :span="4">
                            <span style="font-size: 20px; font-weight: 1000; color: white">
                                <el-icon><Grid /></el-icon>{{ $t('列表数据') }}
                            </span>
                        </el-col>
                    </el-row>
                    <el-card>
                        <div v-loading="loading">
                            <vxe-table :data="tablelist" border height="400" :mouse-config="{ selected: true }" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }">
                                <vxe-column v-for="(column, index) in Stores.comui[componentId][0].tableProps" :field="column.prop" :title="column.label" :width="column.width" :fixed="column.fixed" :align="column.align">
                                    <template #header>
                                        <div v-if="column.type === 'checkbox'">
                                            <el-checkbox v-model="Allcheck" @change="CheckAllChange" />
                                        </div>
                                        <div v-else>
                                            {{ column.label }}
                                        </div>
                                    </template>
                                    <template #default="{ row, rowIndex }">
                                        <div v-if="column.type === 'checkbox'">
                                            <el-checkbox v-model="row['checked']" />
                                        </div>
                                        <div v-else>
                                            {{ row[column.prop] }}
                                        </div>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                        <div style="display: flex; align-items: center; justify-content: center; margin-top: 5px">
                            <span style="width: 100px"> {{ $t('总计') }}:{{ allcount }}</span>
                            <el-button type="primary" round @click="pagejump(1)" :disabled="findform.page == 1" v-loading="loading">
                                <el-icon><ArrowLeft /></el-icon>上一页
                            </el-button>
                            <el-button type="primary" round @click="pagejump(2)" :disabled="findform.page >= findform.pagesize" v-loading="loading">
                                下一页<el-icon><ArrowRight /></el-icon>
                            </el-button>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { httpSend } from '@/utils/api';
import { getCurrentInstance, onMounted, ref, reactive, watch, toRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { Refresh, Search, Plus, Document, Delete } from '@element-plus/icons-vue';
/*组件*/
import UiSet from '@/components/share/UiSet.vue';
import excel from '@/components/share/excel.vue';
import pagemodel from '@/components/share/pagemodel.vue';
//@ts-ignore
import { TableUiSection } from '@/components/share/ui-set.interface.ts';
import * as XLSX from 'xlsx'; /*excel操作*/
//@ts-ignore
import { useshareStore } from '@/store'; /*pina管理*/
import { formatDate, chkgrant } from '@/globalmethods'; /*通用方法*/
const excelRef = ref(null);
const { appContext } = getCurrentInstance();
const ElMessage = appContext.config.globalProperties.$ElMessage;
const { t } = useI18n(); //多语言
// 自定义字段配置
const componentId = 'testsetting';
let uiSectionList: TableUiSection[] = [
    {
        baseProps: [
            { label: '备注', prop: 'des', visible: true, readonly: false, type: 'string', ismore: false },
            { label: '备注1', prop: 'des1', visible: true, readonly: false, type: 'string', ismore: false },
            { label: '备注3', prop: 'des3', visible: true, readonly: false, type: 'string', ismore: false },
            { label: '日期', prop: 'created_at', visible: true, readonly: false, type: 'date', ismore: false },
        ],
        tableProps: [
            { label: 'ID', labelex: '', labeleng: '', prop: 'id', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'left' },
            { label: '备注', labelex: '', labeleng: '', prop: 'des', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'center' },
            { label: '备注1', labelex: '', labeleng: '', prop: 'des1', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
            { label: '备注3', labelex: '', labeleng: '', prop: 'des3', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
            { label: '开单人', labelex: '', labeleng: '', prop: 'tabnm', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
            { label: '修改人', labelex: '', labeleng: '', prop: 'modifier', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
            { label: '更新时间', labelex: '', labeleng: '', prop: 'updated_at', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
            { label: '创建时间', labelex: '', labeleng: '', prop: 'created_at', visible: true, readonly: false, width: '180', type: 'string', fixed: null, align: 'center' },
        ],
    },
];
const loading = ref(false);
const findform = reactive({
    Loginuserid: null,
    Loginuser: null,
    logintime: null,
    state: null,
    firstdata: null,
    lastdata: null,
    pagesize: 0,
    page: 1,
    pagetype: 0,
    pagecount: 100,
});

const Allcheck = ref(false);
const allcount = ref(0); // 总数据条数
const tablelist = ref([]); // 表格数据
const Stores = useshareStore() as any;
const isuigrant = ref(false);
Stores.setcomui([componentId, uiSectionList]);
onMounted(() => {
    getuiset();
    gettablelist();
});

//获取配置数据
const getuiset = async () => {
    loading.value = true;
    let comdata = [];
    comdata[0] = componentId;
    comdata[1] = [];
    Object.assign(comdata[1], uiSectionList);
    const fd = new FormData();
    let data = { comid: componentId, userid: null };
    fd.append('param', JSON.stringify(data));
    const res = await httpSend('getComUiSet', fd, false);
    if (res && res.code == 1) {
        if (res.data.length > 0) {
            let data = JSON.parse(res.data[0]['setjson']);
            // 如果数据依然是字符串，则需要再解析一次
            if (typeof data === 'string') {
                data = JSON.parse(data); // 第二次解析
            }
            if (data) {
                Object.assign(comdata[1], data);
            }
        }
    }
    loading.value = false;
    Stores.setcomui(comdata);
};

const createdata = async () => {
    loading.value = true;
    const res = await httpSend('generate', null, false);
    if (res && res.data && res.code == 1) {
        gettablelist();
    }
    loading.value = false;
};
const gettablelist = async () => {
    loading.value = true;
    tablelist.value = [];
    let data = JSON.parse(JSON.stringify(toRaw(findform)));
    if (data.logintime) {
        data['loginbegin'] = formatDate(findform.logintime[0], 'yyyy-MM-dd');
        data['loginend'] = formatDate(findform.logintime[1], 'yyyy-MM-dd');
        delete data.logintime;
    }
    const fd = new FormData();
    fd.append('param', JSON.stringify(data));
    const res = await httpSend('getTesttab', fd, false);
    if (res && res.data && res.code == 1) {
        findform.firstdata = res.firsdata;
        findform.lastdata = res.lastdata;
        findform.pagesize = res.pagesize;
        tablelist.value = res.data.map((v) => {
            return {
                ...v,
            };
        });
        allcount.value = res.count;
    }
    loading.value = false;
};

//表头全选/取消
const CheckAllChange = (val: boolean) => {
    tablelist.value.forEach((v) => {
        v.checked = val;
    });
    tablelist.value = [...tablelist.value];
};
//重置
const resetForm = () => {
    for (let key in findform) {
        if (findform.hasOwnProperty(key)) {
            if (key == 'pagesize') {
            } else if (key == 'page') {
                findform[key] = 1;
            } else if (key == 'pagetype') {
                findform[key] = 0;
            } else if (key == 'pagecount') {
                findform[key] = 100;
            } else {
                findform[key] = null;
            }
        }
    }
};
//页数变化重新查询
const pagechange = (e) => {
    gettablelist();
};
//页数变化重新查询
const pagejump = (e) => {
    findform.pagetype = e;
    if (e == 2) {
        findform.page = findform.page + 1;
    } else if (e == 1) {
        findform.page = findform.page - 1;
    }
    gettablelist();
};
</script>
<style scoped>
:deep(.el-header) {
    --el-header-padding: 0 20px;
    --el-header-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    height: auto;
    padding: 0;
}
:deep(.el-card__body) {
    padding: 5px !important;
    color: #000000;
}
</style>
